<template>
	<view class="my-container">
		<view @click="goUserInfo" class="my-head">
			<!-- <image src="../../static/icon/top.png"></image> -->
			<!-- <view class="avatar">
				<van-image v-if="avatarUrl" width="60" height="60" fit="cover" round :src="avatarUrl" />
				<van-image v-else width="60" height="60" fit="cover" round src="/static/icon/213.jpg" />
			</view> -->
			<view v-if="userInfo" class="avatar">
				<open-data type="userAvatarUrl"></open-data>
				<!-- <image src="../../static/213.jpg"></image> -->
			</view>
			<view v-else class="avatar">
				<image src="/static/icon/213.jpg"></image>
			</view>
			<view class="my-info">
				<view class="repair-info">{{ userInfo.name }}</view>
				<!-- <view v-if="personType == 3" class="unit">管理员</view>
				<view v-else class="unit">{{ unitName }}</view> -->
				<view>{{userInfo.mobile}}</view>
			</view>
			<view class="work-status">{{workStatus[userInfo['工作状态']]}}</view>
		</view>
		<!-- <view class="info-item" @click="goUserInfo">
			<view class="icon-item">
				<image src="../../static/icon/info.png"></image>
			</view>
			<text>个人信息</text>
			<view class="arrow"></view>
		</view> -->
		<!-- <view v-if="personType == 2" class="info-item" @click="goUnitPersonnel">
			<view class="icon-item">
				<image src="../../static/icon/3.png"></image>
			</view>
			<text>单位人员</text>
			<view class="arrow"></view>
		</view> -->
		<view v-if="personType == 3" class="info-item" @click="goAdminPerson">
			<view class="icon-item">
				<image src="../../static/icon/3.png"></image>
			</view>
			<text>管理人员</text>
			<view class="arrow"></view>
		</view>
		<!-- <view class="info-item" @click="changePassword">
      <view class="icon-item">
        <image src="../../static/icon/info.png"></image>
      </view>
      <text>修改密码</text>
      <view class="arrow"></view>
    </view> -->
		<view v-if="personType !== 3" class="info-item" @click="goAcceptTicket">
			<view class="icon-item">
				<image src="../../static/icon/accept.png"></image>
			</view>
			<text>自主接单</text>
			<view class="arrow"></view>
		</view>
		<view v-if="personType == 1" class="info-item" @click="goAssignTicket">
			<view class="icon-item">
				<image src="../../static/icon/m7.png"></image>
			</view>
			<text>自主派发</text>
			<view class="arrow"></view>
		</view>
		
		<view class="info-item" @click="goStatic">
			<view class="icon-item">
				<image src="../../static/icon/m5.png"></image>
			</view>
			<text>工单统计</text>
			<view class="arrow"></view>
		</view>
		<view class="info-item" @click="goMyTicket">
			<view class="icon-item">
				<image src="../../static/icon/m5.png"></image>
			</view>
			<text>我创建的工单</text>
			<view class="arrow"></view>
		</view>
		<navigator v-if="personType == 1" url="/ticketSystem/delayApply/delayApply">
			<view class="info-item">
				<view class="icon-item">
					<image class="dingyue" src="../../static/icon/dinyue.png"></image>
				</view>
				<text>{{'工单延期审批(' + nostartList.length  +')'}}</text>
				<view class="arrow"></view>
			</view>
		</navigator>
		<view class="info-item" @click="logout">
			<view class="icon-item">
				<image src="../../static/icon/3.png"></image>
			</view>
			<text>退出登录</text>
			<view class="arrow"></view>
		</view>
	</view>
</template>

<script>
	import LbPicker from "@/components/lb-picker";
	import navBar from "@/components/zhouWei-navBar";
	import {
		mapState, mapMutations,
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				workStatus: this.$type.workStatus,
				value1: "",
				lebel1: "",
				value2: "",
				label2: "",
				list1: [{
						label: "选项一",
						value: "A",
					},
					{
						label: "选项二",
						value: "B",
					},
				],
				userInfo: null,
				unitName: '',
				avatarUrl: null,
				userid: undefined,
				unitId: null,
				params: {
					pagination: {
						current: 1,
						pageSize: 1000
					},
					sorter: {
						field: "id",
						order: 0
					}
				},
				nostartList: []
			};
		},
		components: {
			LbPicker,
			navBar
		},
		computed: {
			...mapGetters(['personType'])
		},
		onShow() {
			if(uni.getStorageSync('userInfo')) {
				this.userInfo = uni.getStorageSync('userInfo')
				const currentUnitId = uni.getStorageSync('currentUnitId')
				this.getDelayList()
			}else {
				uni.showModal({
					title: '提示',
					content: '您还没有登录,请登录后使用',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/ticketSystem/verify/verify'
							})
						} else if (res.cancel) {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}
					}
				})
			}
			// if (uni.getStorageSync('login')) {
			// 	this.getUserInfo()
			// }
		},
		methods: {
			...mapMutations(['setPersonType']),
			logout() {
				uni.showToast({
					title: '退出登录成功'
				})
				uni.clearStorageSync();
				setTimeout(() => {
					uni.navigateTo({
					url: '/ticketSystem/verify/verify'
					})
				}, 1000)

				// uni.login({
				//   provider: 'weixin',
				//   success: (res) => {
				//     console.log(res.code);
				// 	this.onLogout(res.code)
				//   }
				// });
			},
			onLogout(code) {
				uni.showLoading({
					mask: true
				})
				this.$http2.post('auth/logout', {
					code,
					authType: 3,
					groupId: uni.getStorageSync('groupId')
				}).then(res => {
					if(res.code === 10000) {
						uni.showToast({
							title: '退出登录成功'
						})
						 uni.clearStorageSync();
						 setTimeout(() => {
							 uni.navigateTo({
							 	url: '/ticketSystem/verify/verify'
							 })
						 }, 1000)
						
					}
				})
			},
			goAdminPerson() {
				uni.navigateTo({
					url: '/ticketSystem/adminPerson/adminPerson'
				})
			},
			goStatic() {
				uni.navigateTo({
					url: '/ticketSystem/statistic/statistic'
				})
			},
			showModal() {
				uni.showModal({
					title: '提示',
					content: '您还没有登录,请登录后使用',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/ticketSystem/verify/verify'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			sendMessage() {
				uni.requestSubscribeMessage({
					tmplIds: ['xl2gYLTa2lscJM5BY7opsqAmfxlSwmRjHS3lFRV2DTw'],
					success(res) {
						if(res['xl2gYLTa2lscJM5BY7opsqAmfxlSwmRjHS3lFRV2DTw'] === 'accept'){
							uni.showToast({
								title: '订阅成功',
								icon: 'none'
							})
						}else {
							uni.showToast({
								title: '取消订阅',
								icon: 'none'
							})
						}
						// uni.showToast({
						// 	title: '订阅成功'
						// })
						console.log(res)
					}
				})
			},
			goAcceptTicket() {
				if(!uni.getStorageSync('login')) {
					this.showModal()
				}else {
					uni.navigateTo({
						url: '/ticketSystem/acceptTicket/acceptTicket'
					})
				}
			},
			goAssignTicket() {
				if(!uni.getStorageSync('login')) {
					this.showModal()
				}else {
					uni.navigateTo({
						url: '/ticketSystem/assignTicket/assignTicket'
					})
				}
			},
			goMyTicket() {
				if(!uni.getStorageSync('login')) {
					this.showModal()
				}else {
					uni.navigateTo({
						url: '/ticketSystem/myTicket/myTicket'
					})
				}
			},
			goUnitPersonnel() {
				uni.navigateTo({
					url: '/ticketSystem/unitPersonnel/unitPersonnel?unitId=' + this.unitId
				})
			},
			goUnitTicket() {
				uni.navigateTo({
					url: '/ticketSystem/unitTicket/unitTicket'
				})
			},
			goRecordCenter() {
				uni.navigateTo({
					url: "/ticketSystem/recordCenter/recordCenter",
				});
			},
			goUserInfo() {
				if(!uni.getStorageSync('login')) {
					this.showModal()
				}else {
					uni.navigateTo({
						url: "/ticketSystem/myInfo/myInfo",
					});
				}
			},
			getDelayList() {
				this.$http2.post('ticketSystem/ticket/list', this.params).then(res => {
					if(res.code === 10000) {
						console.log(res)
						
						res.data.list = res.data.list || []
						this.nostartList = res.data.list.filter(item => item.延期申请状态 === 1)
					}
				})
			}
		},
	};
</script>

<style lang="scss">
	.my-container {
		background-color: #f5f5f5;
		height: 100vh;

		.my-head {
			width: 750rpx;
			height: 221rpx;
			position: relative;
			// background: linear-gradient(to right, #3350D9, #1152FC);;
			background-color: #1152FC;
			image {
				width: 100%;
				height: 100%;
			}

			.avatar {
				position: absolute;
				width: 121rpx;
				height: 121rpx;
				left: 27rpx;
				top: 32rpx;
				// z-index: 99;
				border-radius: 50%;
				overflow: hidden;
				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.my-info {
				position: absolute;
				left: 168rpx;
				top: 47rpx;
				height: 20rpx;
				width: 140rpx;
				height: 100rpx;
				font-size: 32rpx;
				color: #fff;

				.repair-info {
					width: 300rpx;
				}

				.unit {
					width: 570rpx;
				}
			}

			.village {
				width: 164rpx;
				height: 60rpx;
				line-height: 60rpx;
				position: absolute;
				padding-left: 10rpx;
				right: 31rpx;
				top: 49rpx;
				border: 2rpx solid #ffffff;
				border-radius: 2rpx;
				color: #fff;
				font-size: 28rpx;

				&:after {
					position: absolute;
					width: 16rpx;
					height: 16rpx;
					right: 10rpx;
					border-top: 2rpx solid #fff;
					border-right: 2rpx solid #fff;
					transform: rotate(135deg);
					top: 16rpx;
					content: "";
				}
			}
			.work-status {
				position: absolute;
				right: 80rpx;
				top: 70rpx;
				color: #fff;
			}
		}

		.info-item {
			height: 80rpx;
			display: flex;
			align-items: center;
			padding-left: 30rpx;
			// padding-top: 21rpx;
			position: relative;
			background-color: #fff;
			border-bottom: 2rpx solid #f5f5f5;
			box-shadow: 0px 1rpx 0px 0px #f5f5f5;

			.icon-item {
				width: 40rpx;
				height: 40rpx;
				margin-right: 24rpx;

				image {
					width: 100%;
					height: 100%;
				}
				.dingyue {
					width: 42rpx;
					height: 42rpx;
					margin-left: -2rpx;
				}
			}

			text {
				color: #656565;
				// font-size: 28rpx;
				font-size: 32rpx;
			}

			.arrow {
				position: absolute;
				top: 28rpx;
				right: 36rpx;
				transform: rotate(45deg);
				width: 24rpx;
				height: 24rpx;
				color: #9f9f9f;
				border-top: 2rpx solid rgba(159, 159, 159, 1);
				border-right: 2rpx solid rgba(159, 159, 159, 1);
			}
		}
	}
</style>
